<template>
  <el-container class="edit-container" style="height: 100%">
    <el-container>
      <el-aside class="emrList" v-show="emrAside">
        <el-tabs type="border-card" tab-position="right" class="emr-list">
          <el-tab-pane label="病历列表"><Tree></Tree></el-tab-pane>
          <el-tab-pane label="既往病历">既往病历 </el-tab-pane>
          <!-- <el-tab-pane disabled>
        </el-tab-pane> -->
        </el-tabs>
      </el-aside>
      <el-container>
        <el-main>
          <ThinkEditorInstance ref="editorInstance1"></ThinkEditorInstance>
        </el-main>
      </el-container>
      <el-aside v-show="toolbarAside" class="toolbar-aside">Aside</el-aside>
    </el-container>
    <el-footer style="height: 24px">
      <i
        title="病历列表"
        class="el-icon-folder-opened"
        :class="{ 'is-active': emrAside }"
        @click="emrasidechange"
      ></i>
      <div style="position: absolute; left: 190px; color: #606266">
        当前科室<el-divider direction="vertical"></el-divider>
      </div>

      <i
        title="辅助输入"
        class="el-icon-edit"
        :class="{ 'is-active': toolbarAside }"
        @click="toolbarAsidechange"
      ></i
    ></el-footer>
  </el-container>
</template>

<script>
import Tree from "@/views/tree";
import ThinkEditorInstance from "@/views/thinkEditorInstance";

import {
  E_PASTE_TYPE,
  E_TABLE_DELETE_MODE,
  E_TABLE_INSERT_MODE,
  E_CELL_OPT_MODE,
  E_INSTANCE_EVENT_KEY,
  E_EVENT_KEY,
  E_EVENT_HANDLE,
  E_SYSTEM_AUTH_MODE,
  E_VIEW_MODE,
  E_LAYOUT_VERTICAL_ALIGN,
  E_FORMULA_STYLE,
  E_DOC_TYPE,
  E_DISPLAY_MODE,
  E_SET_MODE,
  E_INPUT_MODE,
  E_TIME_TYPE,
} from "@/../public/js/ThinkEditor.Defined";
export default {
  name: "EmrEdit",
  components: {
    ThinkEditorInstance,
    Tree,
  },
  async created() {
    // await this.PreLoadUserDefinedOptions();
    // await this.PreLoadUserDefinedAlgorithms();
    setTimeout(() => {
      this.emrAside = true;
    }, 100);
  },
  async mounted() {
    this.currentEditorInstance = this.$refs["editorInstance1"];
    await this.createNewDoc();
  },
  data() {
    return {
      emrAside: false,
      toolbarAside: true,
      currentEditorInstance: undefined,
    };
  },
  methods: {
    emrasidechange() {
      this.emrAside = !this.emrAside;
    },
    toolbarAsidechange() {
      this.toolbarAside = !this.toolbarAside;
    },
    async createNewDoc() {
      let thinkEditor = await this.currentEditorInstance.NewDocEditor(
        "",
        E_DOC_TYPE.Entity
      );
      //后续操作：示例，Tab页签切换显示当前文档
      this.currentEditorInstance.SelectDocEditor(thinkEditor.docName);
    },
    async getEmrContent() {
      requests
        .get("/ElecMedicalRecord/v2/EmrContent", {
          params: {
            docId: this.docId,
            docNumNo: this.docNumNo,
          },
        })
        .then((res) => {
          let docContentStr = res.data.responseResult.docContent;
          let domparser = new DOMParser();
          let docContentXml = domparser.parseFromString(
            docContentStr,
            "application/xml"
          );
          //直接传str形式的xml，或者arrayBuffer皆可(xml转arraybuffer参考PopFileSelector方法)
          this.$emit("openFile1", res.data.responseResult.docId, docContentStr);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-container {
  height: 100%;
  .emrList {
    transition: width 0.3s;
    width: auto !important;
    .emr-list {
      width: 220px;
      position: relative;
      margin-right: 2px;
    }
    ::v-deep .el-tabs--border-card {
      background: transparent;
      border: none;
      box-shadow: none;
      -webkit-box-shadow: none;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__header {
      background-color: transparent;
      border-bottom: none;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
      margin-left: 2px;
      margin-top: 4px;
      height: auto;
      line-height: 24px;
      border: none;
      border-radius: 6px 6px 6px 6px;
      writing-mode: vertical-lr;
      background-color: #f3f7fe;
      padding: 4px 2px;
      color: #2e6ab3;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
      background-color: #2e6ab3;
      color: #ffffff;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__content  {
      padding: 0px;
    }
  }
  .toolbar-aside {
    border: 1px solid #dcdfe6;
    //防止border重叠
    margin-top: -1px;
  }
  .el-footer {
    border-top: 1px solid #dcdfe6;
    padding: 0 5px;
    display: flex;
    width: 100%;
    align-items: center;
    bottom: 0;
    background-color: #fff;
    i {
      cursor: pointer;
      padding: 2px;
    }
    i:hover {
      background-color: #dcdfe6;
    }

    .el-icon-folder-opened {
      position: absolute;
      left: 70px;
    }
    .el-icon-edit {
      position: absolute;
      right: 120px;
    }
  }
  .is-active {
    background-color: #dcdfe6;
  }

  .el-main {
    padding: 0;
  }

  .edit-tool {
    width: 200px;
  }
}
</style>